<template>
	<view class="records-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="核销记录"></custom-navbar>
		
		<!-- 蓝色头部搜索栏 -->
		<view class="search-header">
			<view class="search-bar">
				<input 
					v-model="searchKeyword" 
					placeholder="输入需要搜索的内容" 
					class="search-input"
					style="font-size: 20rpx; color: #999999;"
					@input="onSearchInput"

				/>
				<view class="search-icon" @click="performSearch">
					<uni-icons type="search" size="20" color="#999999"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 记录列表 -->
		<view class="records-list">
			<view class="record-card" v-for="(record, index) in filteredRecords" :key="record.id">
				<view class="service-desc">{{ record.serviceDesc }}</view>
				<view class="divider"></view>
				<view class="user-info">下单用户:{{ record.userName }}</view>
				<view class="amount-info">实付金额:¥{{ record.amount }}</view>
				<view class="time-info">核销时间:{{ record.verifyTime }}</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="filteredRecords.length === 0">
			<uni-icons type="list" size="60" color="#cccccc"></uni-icons>
			<view class="empty-text">暂无核销记录</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
			searchKeyword: '',
			records: [
				{
					id: 1,
					serviceDesc: '普通洗车、机油、工时',
					userName: '张三',
					amount: '32.00',
					verifyTime: '2022-10-12 11:09'
				},
				{
					id: 2,
					serviceDesc: '普通洗车、机油、工时',
					userName: '李四',
					amount: '32.00',
					verifyTime: '2022-10-12 11:09'
				},
				{
					id: 3,
					serviceDesc: '普通洗车、机油、工时',
					userName: '王五',
					amount: '32.00',
					verifyTime: '2022-10-12 11:09'
				}
			]
		}
	},
	computed: {
		filteredRecords() {
			if (!this.searchKeyword.trim()) {
				return this.records
			}
			return this.records.filter(record => 
				record.serviceDesc.includes(this.searchKeyword) ||
				record.userName.includes(this.searchKeyword) ||
				record.amount.includes(this.searchKeyword)
			)
		}
	},
	onLoad() {
		this.loadRecords()
	},
	methods: {
		// 加载核销记录 - 对接后端API
		async loadRecords() {
			try {
				uni.showLoading({ title: '加载中...' })
				
				// 这里应该调用后端API
				// const response = await this.$api.getRecords({
				//   keyword: this.searchKeyword,
				//   page: 1,
				//   pageSize: 20
				// })
				// this.records = response.data.list
				
				// 模拟数据加载
				await new Promise(resolve => setTimeout(resolve, 1000))
				
				uni.hideLoading()
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		
		// 搜索输入
		onSearchInput() {
			// 可以添加防抖处理
			clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(() => {
				this.performSearch()
			}, 500)
		},
		
		// 执行搜索
		performSearch() {
			// 搜索逻辑已在computed中处理
			console.log('搜索关键词:', this.searchKeyword)
		}
	}
}
</script>

<style lang="scss" scoped>
.records-container {
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-bottom: 120rpx;
	position: relative;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
	
	&::before {
		content: '';
		position: absolute;
		top: calc(env(safe-area-inset-top) + 88rpx);
		left: 0;
		right: 0;
		height: 900rpx;
		background-image: linear-gradient(
			to bottom,
			#2f81fa 0%, #2f81fa 33.33%,
			#f7f7f7 33.33%, #f7f7f7 100% 
		);
		background-repeat: no-repeat;
		z-index: 0;
	}
}

// 搜索栏
.search-header {
	position: relative;
	z-index: 1;
	padding: 20rpx 40rpx 20rpx;
	
	
	
	.search-bar {
		background: #ffffff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		background-color: #f7f7f7;
		
		.search-input {
			flex: 1;
			height: 80rpx;
			font-size: 23rpx !important;
			color: #d5d5d5 !important;
			border: none !important;
			outline: none !important;
			background: transparent !important;
			border-radius: 50rpx;
			padding: 0 20rpx !important;
			line-height: 80rpx !important;
			-webkit-appearance: none !important;
			-moz-appearance: none !important;
			appearance: none !important;
			
			&::placeholder {
				color: #c7c7c7 !important;
				font-size: 20rpx !important;
				opacity: 1 !important;
			}
			
			&::-webkit-input-placeholder {
				color: #999999 !important;
				font-size: 20rpx !important;
			}
			
			&::-moz-placeholder {
				color: #999999 !important;
				font-size: 20rpx !important;
			}
			
			&:-ms-input-placeholder {
				color: #999999 !important;
				font-size: 20rpx !important;
			}
		}
		
		.search-icon {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

// 记录列表
.records-list {
	position: relative;
	z-index: 1;
	padding: 20rpx;
	
	.record-card {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.service-desc {
			font-size: 27rpx !important;
			font-weight: 500 !important;
			color: #3a3a3a !important;
			margin-bottom: 16rpx;
			line-height: 1.4 !important;
		}
		
		.divider {
			height: 7rpx;
			background: #f0f0f0;
			margin-bottom: 16rpx;
		}
		
		.user-info {
			font-size: 24rpx !important;
			color: #3a3a3a !important;
			margin-bottom: 12rpx;
			
		}
		
		.amount-info {
			font-size: 22rpx !important;
			color: #3a3a3a !important;
			margin-bottom: 12rpx;
			
		}
		
		.time-info {
			font-size: 22rpx !important;
			color: #999999 !important;
			line-height: 1.4 !important;
		}
	}
}

// 空状态
.empty-state {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 40rpx;
	
	.empty-text {
		font-size: 28rpx;
		color: #999999;
		margin-top: 20rpx;
	}
}
</style>
